	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="../../zxt/zxt.js"></script>
		<script>importZXT("../../zxt");</script>
	</head>
    
	<body>
		
		<div id="datebox" zxt="zxt.ui.Datebox" zxt.format="yyyymmdd" style="width:100px" zxt.tip="YYYYMMDD" zxt.formatType="N(8)" zxt.hide="0" zxt.value="0"></div>
		<div id="btnDISABLE" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="DISABLE" zxt.mode="NORMAL"></div>
		<hr>
		
		<div id="datebox2" zxt="zxt.ui.Datebox" zxt.format="mmyy"  zxt.value="607" zxt.tip="MMDD" zxt.conf="TextAlign:'right'" style="width:100px" zxt.mode="NORMAL"></div>
		<input type="button" class='por-Button' onclick="javascript:setValue();" value="SET VALUE"/>	
		<input type="button" class='por-Button' onclick="javascript:getValue();" value="GET VALUE"/>
		<input type="button" class='por-Button' onclick="javascript:clearValue();" value="CLEAR VALUE"/>
		<div id="datebox4" zxt="zxt.ui.Datebox" zxt.format="yyyy mm dd" style="width:100px" zxt.value="20090812"></div>
		<div zxt.hide="0" zxt="zxt.ui.Datebox" zxt.format="hhmm"  zxt.tip="HHMM" ></div>
		<div id="dateboxDiv" style="width:100px"></div>	
		
		<table>
			<tr>
				<td width="20%">getType()</td>
				<td width="50%">返回控件类型</td>
				<td><input type="button" name="getType" value="getType" 
					onclick="alert('第一个日期框控件的type为'+$zxtUI.datebox.getType());"/></td>
			</tr>
			<tr>
				<td width="20%">format()</td>
				<td width="50%">返回控件格式</td>
				<td><input type="button" name="format" value="format" 
					onclick="alert('第一个日期框控件的format为'+$zxtUI.datebox.format());"/></td>
			</tr>
			<tr>
				<td>focus() </td>
				<td>设置当前控件焦点</td>
				<td><input type="button" name="focus" value="focus" 
					onclick="$zxtUI.datebox2.focus();alert('第二个日期框控件获得焦点');"/></td>
			</tr>
			<tr>
				<td>onPopImageClick() </td>
				<td>设日期控件图片单击事件 调用日历控件弹出 </td>
				<td><input type="button" name="onPopImageClick" value="onPopImageClick" 
					onclick="$zxtUI.datebox4.onPopImageClick();alert('第三个日期框控件调用日历控件');"/></td>
			</tr>
			<tr>
				<td>renderValue() </td>
				<td>渲染值</td>
				<td><input type="button" name="renderValue" value="renderValue" 
					onclick="$zxtUI.datebox4.renderValue('20090810')"/></td>
			</tr>
			<tr>
				<td>getValue() </td>
				<td>获取值</td>
				<td><input type="button" name="getValue" value="getValue" 
					onclick="alert($zxtUI.datebox4.getValue())"/></td>
			</tr>
		</table>
		
		<div><a href="../index.html">返回</a></div>
	</body>
</html>

<script type="text/javascript">
	$zxt.init();
	$zxtUI.datebox4.mode("MASK");
	$zxtUI.datebox4.render();
	var status = false;
	function onClick$btnDISABLE(){
		if(status){
			$zxtUI.datebox.mode("NORMAL");
			$zxtUI.datebox.render();
			status = false;
		}else{
			$zxtUI.datebox.mode("DISABLE");
			$zxtUI.datebox.render();
			status = true;
		}
	}
	
	
	function setValue(){		
		$zxtUI.datebox2.setValue(606);		
		$zxtUI.datebox2.render();	
	};
	
	function getValue(){	
		var val = $zxtUI.datebox2.getValue();
		alert(val);
	}
	
	function clearValue(){	
		$zxtUI.datebox2.setValue("");
		$zxtUI.datebox2.render();
	}
	
	var box = new zxt.ui.Datebox();
	$("#dateboxDiv").append(box.render());
</script>
